<template>
  <div class="templateComtainer wp100">
    <div class="item vm wp100">
    <h5>
      <div class="vm">系统通知( <span class="fc-blue">{{count}}</span> )</div>
      <div class="vm fr">
        <el-button type="text" class="vm tc-right" @click="more">
          查看更多 <span class="vm ml5 fs18">▶</span>
        </el-button>
      </div>
    </h5>
    <div class="dataTable">
      <zm-table-data
      :data="tableParams.data"
      :columns="columns"
      :fetch="loadList"
      :table-params="tableParams"
      :show-page="false"
      :show-header="false"
      :border="false"
      class="fs14"
      @row-click="rowClick"
    ></zm-table-data>
    </div>
    <detail-container
      v-if="extendDetailParams.visible"
      v-model="extendDetailParams.visible"
      :id="extendDetailParams.id"
      :business-id="extendDetailParams.businessId"
      :is-draft="extendDetailParams.isDraft"
      :type="extendDetailParams.type"
      :is-sold-product="extendDetailParams.isSoldProduct"
      @load-list="loadList"
      :draft-id="extendDetailParams.draftId"
      :return-order-id="extendDetailParams.returnOrderId"
      :is-approve-template="extendDetailParams.isApproveTemplate"
    ></detail-container>
    </div>
  </div>
</template>

<script>
import { columns } from './const'
import tableMixin from '@/mixins/zmTableMixin'
import systemMessageApis from '@/api/src/systemMessage'
import DetailContainer from '@/views/msgInform/components/DetailCantainer'

export default {
  components: {DetailContainer},
  mixins: [tableMixin],
  data () {
    return {
      count: 0,
      extendDetailParams: {
        visible: false,
        id: '',
        businessId: '',
        type: '',
        returnOrderId: ''
      }
    }
  },
  computed: {
    columns () {
      return columns(this)
    }
  },
  methods: {
    async loadList () {
      let res = await systemMessageApis.getList(this.assignQuery({}))
      this.initialTableData(res.list, res.count)
      this.count = res.unLookCount
    },
    more () {
      this.$router.push('/msgInform')
    },
    async rowClick (row) {
      await systemMessageApis.read({messageIds: row.id})
      let _obj = {}
      const isApproveTemplateValueList = ['1', '2', '3', '4']
      // 审批类型的参数配置
      if (isApproveTemplateValueList.includes(row.messageType)) {
        _obj = {
          type: row.processType.toString(),
          isApproveTemplate: true,
          id: row.businessId
        }
      } else {
        let detailID
        // if (['99'].includes(row.messageType)) {
        //   detailID = row.businessId
        // } else {
        //   detailID = row.fromId
        // }
        detailID = row.fromId
        _obj = {
          type: row.messageType.toString(),
          isApproveTemplate: false,
          id: detailID,
          businessId: row.fromId
        }
      }
      this.extendDetailParams = {
        visible: true,
        businessId: row.businessId,
        draftId: row.draftId,
        isSoldProduct: row.processType === '2',
        isDraft: true,
        returnOrderId: row.orderId,
        ..._obj
      }
    }
  }
}
</script>

<style scoped lang="scss">
.templateComtainer {
  margin-left: .42rem;
}
.item {
  width: 100%;
  height: 31.6rem;
  vertical-align: top;
  background: #fff;
  margin: 0.57rem 0 0.57rem 0rem;
  padding: 0.1rem 0.82rem 0.82rem 0.82rem;
  .dataTable {
    height: 27rem;
    overflow: auto;
  }
}
</style>
